<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <div>
      <video
        id="video"
        width="100%"
        height="100%"
        style="display: block; visibility: hidden;"
        controls="controls"
        webkit-playsinline="true"
        playsinline="true"
        x-webkit-airplay="true"
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        x5-video-ignore-metadata="true"
      ></video>
    </div>
    <br />
    <div>
      <input type="button" title="开启摄像头" value="拍照识别" id="capture" />
    </div>
    <canvas id="canvas" width="100%" height="100%"></canvas>
    <script>
      window.onload = function () {
        //访问用户媒体设备的兼容方法
        function getUserMedia(constraints, success, error) {
          if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)
          } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints, success, error)
          } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error)
          } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error)
          }
        }
        let video = document.getElementById('video')
        let canvas = document.getElementById('canvas')
        let context = canvas.getContext('2d')

        function success(stream) {
          //兼容webkit核心浏览器
          let CompatibleURL = window.URL || window.webkitURL
          //将视频流设置为video元素的源
          console.log(stream)
          //video.src = CompatibleURL.createObjectURL(stream);
          video.srcObject = stream
          video.play()
        }

        function error(error) {
          console.log(`访问用户媒体设备失败${error.name}, ${error.message}`)
        }

        if (
          navigator.mediaDevices.getUserMedia ||
          navigator.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia
        ) {
          if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
            console.log('enumerateDevices() not supported.')
            return
          }

          // 列出摄像头和麦克风
          var exArray = []
          navigator.mediaDevices
            .enumerateDevices()
            .then(function (devices) {
              devices.forEach(function (device) {
                console.log(device.kind + ': ' + device.label + ' id = ' + device.deviceId)
                if (device.kind == 'videoinput') {
                  // alert(device.label);
                  console.log(
                    '%cvideo_server.html line:135 device.label',
                    'color: white; background-color: #007acc;',
                    device.label
                  )
                  exArray.push(device.deviceId)
                }
              })

              var mediaOpts = {
                video: {
                  width: 420,
                  height: 120,
                },
              }
              var mediaOpts = {
                video: {
                  deviceId: {
                    exact: exArray[1],
                  },
                },
              }

              //调用用户媒体设备, 访问摄像头
              getUserMedia(mediaOpts, success, error)
            })
            .catch(function (err) {
              console.log(err.name + ': ' + err.message)
            })
        } else {
          console.log('%cVideo_pictures.html line:163 不支持访问用户媒体', 'color: white; background-color: #007acc;');
        }

        var img = new Image()
        document.getElementById('capture').addEventListener('click', function () {
          var s = $('#video').outerWidth()
          var e = $('#video').outerHeight()
          console.log('%cVideo_pictures.html line:155 Object', 'color: white; background-color: #007acc;', { s, e })
          $('#canvas').attr('width', s)
          $('#canvas').attr('height', e)
          context.drawImage(video, 0, 0, 1887, 1415)
          // var image_data = context.getImageData(0, 0, 480, 120);
          // var string = OCRAD(image_data);
          // console.log(string);
        })
      }
    </script>
  </body>
</html>
